<template>
  <div :class="['page-index', fixedHeader ? 'index-margin' : '']">
    <div class="banner-container">
      <div class="banner">
        <Carousel
          v-model="swiper"
          loop
          :height="355"
          :autoplay="true"
          :autoplay-speed="3000"
          dots="outside"
        >
          <CarouselItem v-for="(item, index) in banner_list" :key="index">
            <div
              class="carousel-item"
              :style="{ backgroundColor: item.bannerBackground }"
              @click="toPath(item)"
            >
              <div class="item-bg">
                <img :src="item.bannerUrl" :key="item.bannerUrl"/>
              </div>
            </div>
          </CarouselItem>
        </Carousel>
      </div>
      <div class="nav-bar" v-if="majorNavList.length > 0">
        <div
          class="nav-item"
          v-for="(item, index) in majorNavList"
          :key="index"
          @click="handleClick(item.majorId)"
        >
          <div class="nav-item-img">
            <img class="img1" :src="item.foregroundIcon" :key="item.foregroundIcon" />
            <img class="img2" :src="item.backgroundIcon" :key="item.backgroundIcon" />
          </div>
          <div class="nav-item-name">{{ item.name }}</div>
        </div>
        <!-- <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img1.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img1.png" alt="">
          </div>
          <div class="nav-item-name">职场提升</div>
        </div>
        <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img2.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img2.png" alt="">
          </div>
          <div class="nav-item-name">编程与开发</div>
        </div>
        <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img3.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img3.png" alt="">
          </div>
          <div class="nav-item-name">AI/数据科学</div>
        </div>
        <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img4.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img4.png" alt="">
          </div>
          <div class="nav-item-name">产品与运营</div>
        </div>
        <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img5.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img5.png" alt="">
          </div>
          <div class="nav-item-name">设计创意</div>
        </div>
        <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img6.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img6.png" alt="">
          </div>
          <div class="nav-item-name">语言学习</div>
        </div>
        <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img7.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img7.png" alt="">
          </div>
          <div class="nav-item-name">职业考试</div>
        </div>
        <div class="nav-item">
          <div class="nav-item-img">
            <img class="img1" src="/img/pc/nav-item-img8.png" alt="">
            <img class="img2" src="/img/pc/nav-item-active-img8.png" alt="">
          </div>
          <div class="nav-item-name">生活习惯</div>
        </div> -->
      </div>
    </div>
    <div class="major-classify-container">
      <!-- 直播课程 -->
      <div class="live-course" v-if="chapter_live_course_list.length > 0">
        <div class="toptips">
          <!-- <span class="tips-title">直播课程</span> -->

          <img class="tips-icon" src="/img/pc/course-live.png" alt="" />
          <span class="tips-title">直播课程</span>
        </div>
        <!-- 展示样板 -->
        <div class="major-classify-core">
          <live-card
            v-for="(item, index) in chapter_live_course_list"
            :key="index"
            :detail="item"
            :is_member="is_member"
            :user_member="user_member"
            :memberDiscount="memberDiscount"
            :major="getMajorName(item.majorId)"
          ></live-card>
        </div>
        <div class="more">
          <div class="btn-more" @click="linkTo('/classify?type=2')">
            查看更多直播课程
          </div>
        </div>
      </div>
      <!-- 热门课程 -->
      <div class="hot-course" v-if="hot_course_list.length > 0">
        <div class="toptips">
          <!-- <span class="tips-title">热门课程</span> -->

          <img class="tips-icon" src="/img/pc/hot-course.png" alt="" />
          <span class="tips-title">热门课程</span>
        </div>
        <!-- 展示样板 -->
        <div class="major-classify-core">
          <course-card
            v-for="(item, index) in hot_course_list"
            :key="index"
            :detail="item"
            :is_member="is_member"
            :user_member="user_member"
            :memberDiscount="memberDiscount"
            :major="getMajorName(item.majorId)"
          ></course-card>
        </div>
        <div class="more">
          <div class="btn-more" @click="linkTo('/classify')">
            查看更多热门课程
          </div>
        </div>
      </div>
      <!-- 免费课程 -->
      <div class="free-course" v-if="free_course_list.length > 0">
        <div class="toptips">
          <img class="tips-icon" src="/img/pc/course-free.png" alt="" />
          <span class="tips-title">免费课程</span>
        </div>
        <!-- 展示样板 -->
        <div class="major-classify-core">
          <course-card
            v-for="(item, index) in free_course_list"
            :key="index"
            :detail="item"
            :is_member="is_member"
            :user_member="user_member"
            :memberDiscount="memberDiscount"
            :major="getMajorName(item.majorId)"
          ></course-card>
        </div>
        <div class="more">
          <div class="btn-more" @click="linkTo('/classify?type=3')">
            查看更多免费课程
          </div>
        </div>
      </div>
      <!-- 专业课程 -->
      <div class="major-course" v-if="major_course_list.length > 0">
        <div class="toptips">
          <img class="tips-icon" src="/img/pc/course-major.png" alt="" />
          <span class="tips-title">专业课程</span>
        </div>
        <!-- 展示样板 -->
        <div>
          <div
            class="major-classify-core"
            v-for="(value, index) in major_course_list"
            :key="index"
          >
            <template>
              <div
                class="classify-title"
                :style="
                  kl_md.KLGL == 1
                    ? {
                        height: 'auto',
                        backgroundImage:
                          'url(' +
                          (value.iconPath ? value.iconPath : baseImg) +
                          ')'
                      }
                    : {
                        backgroundImage:
                          'url(' +
                          (value.iconPath ? value.iconPath : baseImg) +
                          ')'
                      }
                "
              >
                <p class="title">{{ value.name }}</p>
                <div class="info">{{ value.introduce }}</div>
                <div
                  class="btnMore"
                  @click="linkTo('/classify?id=' + value.id)"
                >
                  查看更多
                </div>
              </div>
              <course-card
                v-for="(item, index) in getMajorCourse(value.id)"
                :key="index"
                :detail="item"
                :is_member="is_member"
                :user_member="user_member"
                :memberDiscount="memberDiscount"
                :major="getMajorName(item.majorId)"
              ></course-card>
            </template>
          </div>
        </div>
        <div class="more">
          <div class="btn-more" @click="linkTo('/classify')">
            查看更多专业课程
          </div>
        </div>
      </div>
      <div class="combo" v-if="combo_course_list.length > 0 && kl_md.KLKCTC == 1">
        <div class="title">
          <div class="left-title">
            <img class="tips-icon" src="/img/pc/course-combo.png" alt="" />
            <span class="tips-title">套餐</span>
          </div>
          <div class="right-more" @click="linkTo('/course-combo')">
            查看更多套餐 >
          </div>
        </div>
        <div class="content">
          <combo-card
            v-for="(item, index) in combo_course_list"
            :key="index"
            :detail="item"
          ></combo-card>
        </div>
      </div>
      <!-- <div class="news" v-if="news_info_list.length > 0">
        <div class="title">
          <div class="left-title">
            <img class="tips-icon" src="/img/pc/news.png" alt="" />
            <span class="tips-title">资讯</span>
          </div>
          <div class="right-more" @click="linkTo('/information')">
            查看更多资讯 >
          </div>
        </div>
        <div class="content">
          <new-card
            v-for="(item, index) in news_info_list"
            :key="index"
            :detail="item"
          ></new-card>
        </div>
      </div> -->
      <!-- <div class="news"></div> -->
    </div>
  </div>
</template>
<script>
import CourseCard from "~/components/pc/CourseCard.vue";
import LiveCard from "~/components/pc/LiveCard.vue";
import NewCard from "~/components/pc/NewCard.vue";
import ComboCard from "~/components/pc/ComboCard.vue";
import { mapState, mapActions, mapMutations } from "vuex";
import { getCourse, getCourseByMajor, getLiveChapter } from "~/api/course";
import { getCourseComboList } from "~/api/course-combo";
import { getMemberInfo, getMember } from "~/api/member";
import { getNewsList } from "~/api/news";
import { getIndexMajor } from "~/api/nav";
import { getMajorList } from "~/api/major";
export default {
  data() {
    return {
      baseImg: "/img/pc/major-bg.png",
      bottomMore: true,
      classifyHeight: {
        maxHeight: "852px"
      },
      swiper: 0,
      classes: [],
      page: 1,
      pageSize: 50,
      major_rec_list: [],
      memberDiscount: {},
      chapter_live_course_list: [],
      news_list: [],
      majorNavList: [],
      combo_course_list:[],//套餐课程
      // id:null
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      major_list(state) {
        return state.major_list;
      },
      nav_list(state) {
        return state.nav_list;
      },
      notice_list(state) {
        return state.notice_list;
      },
      class_list(state) {
        return state.class_list;
      },
      banner_list(state) {
        return state.banner_list.filter(i => i.type == 1);
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    fixedHeader() {
      return this.$route.meta.fixedHeader;
    },
    hot_course_list() {
      return this.classes.filter((i, x) => x < 8);
    },
    free_course_list() {
      return this.classes.filter(i => i.isFree == 1).filter((i, x) => x < 8);
    },
    live_course_list() {
      return this.classes.filter(i => i.isLive == 1).filter((i, x) => x < 8);
    },
    news_info_list() {
      if (this.news_list && this.news_list.length > 0) {
        return this.news_list
          .reverse()
          .filter((i, x) => i.isOpen === 1)
          .filter((i, x) => x < 4);
      } else {
        return [];
      }
    },
    // major_course_list(){
    //   return this.classes.filter(i => i.majorId == this.id).filter((i, x) => x < 7);
    // },
    major_course_list() {
      return this.major_rec_list.filter((i, x) => x < 3);
    }
  },
  methods: {
    //获取课程套餐
    async getCourseComboData(){
      this.SET_IS_LOADING(true);
      let params = {
        sort:"id desc",
        offset: 0,
        limit: 4,
      }
      let result = await getCourseComboList(params);
      if (result && result.data && result.data.code == 200) {
        this.combo_course_list = result.data.data.rows;
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
      this.SET_IS_LOADING(false);
    },
    async getNews() {
      this.SET_IS_LOADING(true);
      let result = await getNewsList();
      if (result && result.data && result.data.code == 200) {
        this.news_list = result.data.data.rows;
        // console.log("news_list", result.data.data.rows);
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
      this.SET_IS_LOADING(false);
    },
    async getMajorNavList() {
      this.SET_IS_LOADING(true);
      let result = await getIndexMajor();
      if (result && result.data && result.data.code == 200) {
        this.majorNavList = result.data.data.rows;
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
      this.SET_IS_LOADING(false);
    },
    async getLiveChapterCourse() {
      this.SET_IS_LOADING(true);
      let result = await getLiveChapter();
      if (result && result.data && result.data.code == 200) {
        this.chapter_live_course_list = result.data.data;
        // console.log("chapter_live_course_list", result.data.data);
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
      this.SET_IS_LOADING(false);
    },
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      if (Object.keys(this.user_info).length > 0) {
        let memberDiscount = await getMemberInfo(this.user_info.id);
        if (
          memberDiscount &&
          memberDiscount.data &&
          memberDiscount.data.code == 200
        ) {
          this.memberDiscount = memberDiscount.data.data;
        } else {
          // this.$Message.error(this.$t("locale.pc.index.t9"));
        }
      } else {
        this.memberDiscount = {};
      }
      this.SET_IS_LOADING(false);
    },
    getMajorCourse(id) {
      // this.id = id;
      return this.classes.filter(i => i.majorId == id).filter((i, x) => x < 7);
    },
    moreMajor() {
      this.bottomMore = false;
      this.classifyHeight = {};
    },
    ...mapActions([
      "initMajorList",
      "initClassList",
      "initNoticeList",
      "initBannerList",
      "initNavList",
      "initMember"
    ]),
    ...mapMutations(["SET_IS_LOADING"]),
    linkTo(path) {
      this.$router.push({
        path
      });
    },
    async getData(other_params) {
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
        sort: "sortIndex desc",
        isRec: 1,
        isUse:1,
        ...other_params
      };
      let result = await getCourse(params);
      // let result = await getCourseByMajor(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        // 加一层折扣时间的判断,不在折扣时间内判定为不是折扣课程
        this.classes = result.data.data.rows.map(item=>{
          let currentTime = new Date().getTime();
          if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
            return {
              ...item,
              isDiscount:0
            };
          }else{
            return item;
          }
        }).filter(i => i.isRec == 1);
        // console.log("courseList",courseList);
        // this.classes = result.data.data.rows.filter(i => i.isRec == 1);
        // console.log("classes", this.classes);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(
          this.$t("locale.pc.index.t9") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    getMajorName(id) {
      let res = this.major_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.pc.index.t10");
      }
    },
    async getMajorData() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: 0,
        limit: 10,
        sort: "videoSort desc",
        isRec: 1
      };
      // const { major, type, price } = this.search_form;
      // if (major) {
      //   params = {
      //     ...params,
      //     marjor
      //   };
      // }
      // if (price) {
      //   params = {
      //     ...params,
      //     sort: "price",
      //     sortType: price
      //   };
      // }
      let result = await getMajorList(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.major_rec_list = [
          ...result.data.data.rows.map((i, x) => {
            return { ...i, is_actived: false };
          })
        ];
        // console.log(this.major_rec_list);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(
          this.$t("locale.pc.index.t9") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    initPage() {
      return new Promise((res, rej) => {
        if (process.client) {
          try {
            this.getData();
            this.initMajorList();
            this.initNoticeList();
            this.initBannerList();
            this.initNavList();
            this.getMajorData();
            this.getMemberInfo();
            this.initMember();
            this.getLiveChapterCourse();
            this.getNews();
            this.getMajorNavList();
            this.getCourseComboData();
            res("success");
          } catch (e) {
            // console.log(e);
            rej(e);
          }
        }
      }).then();
    },
    toPath(path) {
      const { redirectUrl } = path;
      if (redirectUrl) {
        if (/^http/.test(redirectUrl)) {
          window.location.href = redirectUrl;
        } else {
          // console.log("path:", path);
          this.$router.push({
            path: redirectUrl
          });
        }
      }
    },
    handleClick(id) {
      this.$router.push("/classify?id=" + id);
    }
  },
  mounted() {},
  created() {
    if (process.client) {
    }
    this.initPage();
  },
  components: {
    CourseCard,
    LiveCard,
    NewCard,
    ComboCard
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.page-index.index-margin {
  margin-top: 70px;
}
.page-index {
  background-color: #f0f0f0;
  // padding-bottom: 10px;
  min-height: calc(100vh - 427px);
  .banner-container {
    width: 100%;
    // height: 620px;
    background-color: #ffffff;
    padding-top: 36px;
    .banner {
      width: 1200px;
      // height: 338px;
      // background-color: #dedede;
      // border-radius: 22px;
      margin: 0 auto;
      overflow: hidden;
      .carousel-item {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .item-bg {
          width: 100%;
          height: 100%;
          overflow: hidden;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .nav-bar {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      // background: orange;
      height: 132px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      .nav-item {
        width: 130px;
        height: 120px;
        cursor: pointer;
        .nav-item-img {
          // margin: 0 auto;
          margin: 19px auto 0;
          width: 60px;
          height: 60px;
          background: var(--theme-color);
          .img1 {
            display: block;
          }
          .img2 {
            display: none;
          }
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }

        .nav-item-name {
          font-size: 16px;
          line-height: 30px;
          text-align: center;
          font-weight: bold;
          color: var(--theme-color);
        }
      }
      .nav-item:hover {
        border-radius: 2px;
        background: var(--theme-color);
        box-shadow: 0 0 9px rgba(0, 0, 0, 0.4);
        .nav-item-img {
          .img1 {
            display: none;
          }
          .img2 {
            display: block;
          }
        }
        .nav-item-name {
          color: #ffffff;
        }
      }
    }
  }
  .major-classify-container {
    width: 100%;
    background-color: #f5f6f7;
    .live-course {
      width: 1200px;
      margin: 0 auto;
      .toptips {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        // text-align: center;
        padding-top: 30px;
        padding-bottom: 40px;
        img {
          background-color: var(--theme-color);
        }
        .tips-title {
          position: relative;
        }
        // .tips-title::before{
        //   content: "";
        //   position: absolute;
        //   left: -48px;
        //   top: 0;
        //   width: 48px;
        //   height: 48px;
        //   background-image: url('/img/pc/hot-course.png');
        //   background-color:var(--theme-color);
        // }
      }
      .major-classify-core {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-flow: wrap;
        // justify-content: space-between;
      }
      .more {
        width: 100%;
        margin-bottom: 30px;
        .btn-more {
          cursor: pointer;
          margin: 0 auto;
          font-size: 16px;
          color: var(--theme-color);
          font-weight: bold;
          width: 178px;
          height: 34px;
          text-align: center;
          line-height: 34px;
          border-radius: 17px;
          border: solid 1px var(--theme-color);
        }
      }
    }
    .hot-course {
      width: 1200px;
      margin: 0 auto;
      .toptips {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        // text-align: center;
        padding-top: 30px;
        padding-bottom: 40px;
        img {
          background-color: var(--theme-color);
        }
        .tips-title {
          position: relative;
        }
        // .tips-title::before{
        //   content: "";
        //   position: absolute;
        //   left: -48px;
        //   top: 0;
        //   width: 48px;
        //   height: 48px;
        //   background-image: url('/img/pc/hot-course.png');
        //   background-color:var(--theme-color);
        // }
      }
      .major-classify-core {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-flow: wrap;
        // justify-content: space-between;
      }
      .more {
        width: 100%;
        margin-bottom: 30px;
        .btn-more {
          cursor: pointer;
          margin: 0 auto;
          font-size: 16px;
          color: var(--theme-color);
          font-weight: bold;
          width: 178px;
          height: 34px;
          text-align: center;
          line-height: 34px;
          border-radius: 17px;
          border: solid 1px var(--theme-color);
        }
      }
    }
    .free-course {
      width: 1200px;
      margin: 0 auto;
      .toptips {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        // text-align: center;
        padding-top: 30px;
        padding-bottom: 40px;
        img {
          background-color: var(--theme-color);
        }
        .tips-title {
          position: relative;
        }
        // .tips-title::before{
        //   content: "";
        //   position: absolute;
        //   left: -48px;
        //   top: 0;
        //   width: 48px;
        //   height: 48px;
        //   background-image: url('/img/pc/hot-course.png');
        //   background-color:var(--theme-color);
        // }
      }
      .major-classify-core {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-flow: wrap;
        // justify-content: space-between;
      }
      .more {
        width: 100%;
        margin-bottom: 30px;
        .btn-more {
          cursor: pointer;
          margin: 0 auto;
          font-size: 16px;
          color: var(--theme-color);
          font-weight: bold;
          width: 178px;
          height: 34px;
          text-align: center;
          line-height: 34px;
          border-radius: 17px;
          border: solid 1px var(--theme-color);
        }
      }
    }
    .major-course {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 30px;

      .toptips {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        // text-align: center;
        padding-top: 30px;
        padding-bottom: 40px;
        img {
          background-color: var(--theme-color);
        }
        .tips-title {
          position: relative;
        }
        // .tips-title::before{
        //   content: "";
        //   position: absolute;
        //   left: -48px;
        //   top: 0;
        //   width: 48px;
        //   height: 48px;
        //   background-image: url('/img/pc/hot-course.png');
        //   background-color:var(--theme-color);
        // }
      }
      .major-classify-core {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-flow: wrap;
        // justify-content: space-between;
      }
      .more {
        width: 100%;
        margin-bottom: 30px;
        .btn-more {
          cursor: pointer;
          margin: 0 auto;
          font-size: 16px;
          color: var(--theme-color);
          font-weight: bold;
          width: 178px;
          height: 34px;
          text-align: center;
          line-height: 34px;
          border-radius: 17px;
          border: solid 1px var(--theme-color);
        }
      }
      .classify-title {
        box-sizing: border-box;
        padding: 30px 20px;
        width: 278px;
        height: 292px;
        // background-color: #ffffff;
        border-radius: 4px;
        margin-bottom: 36px;
        margin-left: 11px;
        margin-right: 11px;
        background-image: url("/img/pc/major-bg.png");
        background-size: 100% 100%;
        .title {
          font-size: 30px;
          font-weight: bold;
          color: #ffffff;
          margin-bottom: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info {
          width: 80%;
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          height: 44px;
          line-height: 22px;
          margin-bottom: 60px;
        }
        .btnMore {
          width: 88px;
          height: 26px;
          background-color: #ffffff;
          border-radius: 13px;
          color: var(--theme-color);
          text-align: center;
          line-height: 26px;
          font-size: 14px;
          cursor: pointer;
          font-weight: bold;
        }
      }
    }
    .news {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 50px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0 30px 0;
        .left-title {
          display: flex;
          font-size: 36px;
          img {
            display: block;
            background-color: var(--theme-color);
          }
          .tips-title {
            position: relative;
          }
        }
        .right-more {
          margin-right: 10px;
          cursor: pointer;
          font-size: 16px;
          color: #abaeb3;
        }
        .right-more:hover {
          color: var(--theme-color);
        }
      }
      .content {
        display: flex;
        flex-flow: wrap;
      }
    }
    .combo {
      width: 1200px;
      margin: 0 auto;
      padding-bottom: 50px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0 30px 0;
        .left-title {
          display: flex;
          font-size: 36px;
          img {
            display: block;
            background-color: var(--theme-color);
          }
          .tips-title {
            position: relative;
          }
        }
        .right-more {
          margin-right: 10px;
          cursor: pointer;
          font-size: 16px;
          color: #abaeb3;
        }
        .right-more:hover {
          color: var(--theme-color);
        }
      }
      .content {
        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
      }
    }
  }
}
</style>
<style lang="scss" rel="stylesheet/scss">
.page-index {
  .ivu-carousel-dots li button {
    background: var(--theme-color);
  }
  .ivu-carousel-list {
    border-radius: 22px;
  }
}
</style>
